.tabs-lifted > .tab:focus-visible {
  border-end-end-radius: 0;
  border-end-start-radius: 0;
}
.tabs {
  @apply flex;
  --tabs-height: auto;
  --tabs-direction: row;
  height: var(--tabs-height);
  flex-direction: var(--tabs-direction);
}

.tab {
  @apply text-base-content relative inline-flex cursor-pointer appearance-none items-center justify-center text-center text-base select-none;
  height: var(--size);
  --size: calc(var(--size-field, 0.25rem) * 9.5);
  --tab-p: 1rem;
  --tab-bg: var(--color-base-100);
  --tab-border-color: color-mix(in oklab, var(--color-base-content), #0000 90%);
  padding-inline: var(--tab-p, 1rem);

  &:focus,
  &:focus-visible {
    @apply outline-none;
  }

  /* disabled */
  &[disabled] {
    @apply pointer-events-none opacity-40;
  }

  @media (hover: hover) {
    &[disabled]:hover {
      @apply pointer-events-none opacity-40;
    }
  }
}

.tab-active:not([disabled]) {
  @apply border-primary text-primary;
}

.tabs-bordered > .tab {
  @apply border-base-content/10 [@media(hover:hover)]:hover:border-primary/30 [@media(hover:hover)]:hover:text-primary;
  border-style: solid;
  border-bottom-width: calc(var(--border, 1px) + 1px);
}

.tabs-bordered.tabs-vertical {
  --tabs-direction: column;

  & > .tab {
    @apply w-full justify-start border-b-0;
    border-inline-end-width: calc(var(--border, 1px) + 1px);
  }
}

.tabs-lifted > .tab {
  @apply [@media(hover:hover)]:hover:border-primary/30 [@media(hover:hover)]:hover:text-primary;
  border: var(--tab-border, 1px) solid transparent;
  border-width: 0 0 var(--tab-border, 1px) 0;
  border-radius: var(--radius-field, 0.375rem);
  border-bottom-color: var(--tab-border-color);
  padding-inline-start: var(--tab-p, 1rem);
  padding-inline-end: var(--tab-p, 1rem);
  padding-top: var(--tab-border, 1px);
}

.tabs-lifted > .tab.tab-active:not([disabled]) {
  background-color: var(--tab-bg);
  border-width: var(--tab-border, 1px) var(--tab-border, 1px) 0 var(--tab-border, 1px);
  border-color: var(--tab-border-color);
  border-end-start-radius: 0;
  border-end-end-radius: 0;
  padding-inline-start: calc(var(--tab-p, 1rem) - var(--tab-border, 1px));
  padding-inline-end: calc(var(--tab-p, 1rem) - var(--tab-border, 1px));
  padding-bottom: var(--tab-border, 1px);
  padding-top: 0;
}

.tabs-lifted > .tab.tab-active:not([disabled]):before {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  width: calc(100% + var(--radius-field, 0.375rem) * 2);
  height: var(--radius-field, 0.375rem);
  bottom: 0;
  background-size: var(--radius-field, 0.375rem);
  background-repeat: no-repeat;
  background-position:
    top left,
    top right;
  --tab-grad: calc(69% - var(--tab-border, 1px));
  --radius-start: radial-gradient(
    circle at top left,
    transparent var(--tab-grad),
    var(--tab-border-color) calc(var(--tab-grad) + 0.25px),
    var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)),
    var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.25px)
  );
  --radius-end: radial-gradient(
    circle at top right,
    transparent var(--tab-grad),
    var(--tab-border-color) calc(var(--tab-grad) + 0.25px),
    var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)),
    var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.25px)
  );
  background-image: var(--radius-start), var(--radius-end);
}

.tabs-lifted > .tab.tab-active:not([disabled]):first-child:before {
  background-image: var(--radius-end);
  background-position: top right;
}

.tabs-lifted > .tab.tab-active:not([disabled]):last-child:before {
  background-image: var(--radius-start);
  background-position: top left;
}

/* RTL Styles */
[dir="rtl"] .tabs-lifted > .tab.tab-active:not([disabled]):first-child:before {
  background-image: var(--radius-start);
  background-position: top left;
}

[dir="rtl"] .tabs-lifted > .tab.tab-active:not([disabled]):last-child:before {
  background-image: var(--radius-end);
  background-position: top right;
}

.tabs-lifted > .tab-active:not([disabled]) + .tabs-lifted .tab-active:not([disabled]) {
  &:before {
    background-image: var(--radius-end);
    background-position: top right;
  }
}

.tabs-lifted {
  &:has(.tab-content[class^="rounded-"]) .tab:first-child:not(.tab-active),
  &:has(.tab-content[class*=" rounded-"]) .tab:first-child:not(.tab-active) {
    @apply border-b-transparent;
  }
}

.tabs-xl :where(.tab) {
  @apply text-xl;
  --size: calc(var(--size-field, 0.25rem) * 14);
  --tab-p: 1.5rem;
}

.tabs-lg :where(.tab) {
  @apply text-lg;
  --size: calc(var(--size-field, 0.25rem) * 11.5);
  --tab-p: 1.25rem;
}

.tabs-md :where(.tab) {
  @apply text-base;
  --size: calc(var(--size-field, 0.25rem) * 9.5);
  --tab-p: 1rem;
}

.tabs-sm :where(.tab) {
  @apply text-sm;
  --size: calc(var(--size-field, 0.25rem) * 7.5);
  --tab-p: 0.75rem;
}

.tabs-xs :where(.tab) {
  @apply text-sm;
  --size: calc(var(--size-field, 0.25rem) * 6);
  --tab-p: 0.5rem;
}
